import {isEmpty, resetState} from '@/utils/index';

const barCanvas = {
    props:{
        canvasSetting:{
            type:Object,
            default:function () {
                return {
                    barWidth: uni.upx2px(700),//总宽度
                    barHeight: uni.upx2px(270),//总高度
                    minItemWidth: uni.upx2px(50),//每个柱子的最小宽度
                    titleSize:uni.upx2px(20),//底部标题字号
                    titleColor:"#333333",//标题颜色
                    highBgColor:"#f2f4ff",//高柱背景颜色
                    lowBgColor:"#377cfd",//低柱背景色
                    fontSize:uni.upx2px(20),//字号
                    highFontColor:"#377cfd",//字体颜色
                    lowFontColor:"#ffffff",//字体颜色
                    titleHeight: uni.upx2px(50)//底部标题的高度
                };
            }
        }
    },
    data(){
        return {

        }
    },
//        watch:{
//            barData:function (newVal) {
//                console.log('watch:',this.barData)
//                console.log('watch:',newVal)
//                this.drawCanvas();
//            }
//        },
    methods: {
        /**
         * @param {Object} barData：柱状图数据
         * 找到personNum最大值
         */
        findMax: function(barData) {
            if (barData == undefined || barData.length < 1) {
                return undefined;
            }
            let len = barData.length;
            let max = barData[0].personNum;
            for (let i = 1; i < len; i++) {
                let itemPersonNum = barData[i].personNum;
                if (itemPersonNum > max) {
                    max = itemPersonNum;
                }
            }
            return max;
        },
        /**
         * 绘制自动换行文字
         */
        drawLongText: function(content, canvasWidth,canvasHeight,fontSize) {
            //画布宽度除以字号,得到每行容纳的字数
            let textareaWidth = Math.ceil(canvasWidth/fontSize);
            //存放切割后的内容
            let text = [];
            while (content.length > 0) {
                text.push(content.substr(0, textareaWidth))
                content = content.substr(textareaWidth, content.length)
            }
            //设置文本垂直居中
            for (let i = 0; i < text.length; i++) {
                //TODO:根据行高计算
            }
        },
        drawCanvas(canvasId){
            /**
             * 根据数组长度和总宽度，算出每个柱子的宽度，
             * 柱子之间的宽度设置为柱子宽度的1/2
             * 暂不支持超出屏幕宽度的情况，最多7个柱子
             *
             * 计算柱子的宽度
             */
            const {
                barWidth,
                barHeight,
                minItemWidth,
                titleSize,
                titleColor,
                highBgColor,
                lowBgColor,
                fontSize,
                highFontColor,
                lowFontColor,
                titleHeight
            } = this.canvasSetting;
            let itemWidth = parseInt(2 * barWidth / (3 * this.barData.length - 1));
            if(itemWidth<minItemWidth){
                itemWidth = minItemWidth;
            }
            let space = parseInt(itemWidth / 2);
            let maxPersonNum = this.findMax(this.barData);
            const ctx = uni.createCanvasContext(canvasId);

            for (let i = 0; i < this.barData.length; i++) {
                let item = this.barData[i];
                let realBarHeight  = barHeight - titleHeight;
                let itemHeight = item.personNum / maxPersonNum * realBarHeight;
                let startX = i * (space + itemWidth);
                let startY = realBarHeight - itemHeight;
                // console.log('startX:',startX)
                // console.log('startY:',startY)
                //绘制长柱子
                ctx.setFillStyle(highBgColor);
                ctx.fillRect(startX, startY, itemWidth, itemHeight);

                // #ifdef H5
                ctx.draw(true);
                // #endif

                //绘制短柱子，百分比部分
                let itemPercentHeight = itemHeight * item.rightPercent;
                let startPercentY = realBarHeight - itemPercentHeight;
                ctx.setFillStyle(lowBgColor);
                ctx.fillRect(startX, startPercentY, itemWidth, itemPercentHeight);
                // #ifdef H5
                ctx.draw(true);
                // #endif

                //画长柱子上的文字
                //极端情况处理:柱子很短，不足文字高度，则文字和百分比文字放在柱子头部
                let startTextY = realBarHeight - itemHeight * (1 + item.rightPercent) / 2;
                let startPercentTextY = realBarHeight - itemPercentHeight / 2;
                let curLowFontColor = lowFontColor;
                if (itemHeight < fontSize) { //文字和百分比文字放在柱子头部
                    startTextY = realBarHeight - itemHeight - 1.5*fontSize;
                    startPercentTextY = realBarHeight - itemHeight - fontSize/2;
                    curLowFontColor = highFontColor;
                } else {
                    if (itemPercentHeight < fontSize) { //短柱不足，
                        startPercentTextY = startPercentY - fontSize;
                        curLowFontColor = highFontColor;
                        if (startPercentTextY - startTextY < fontSize) { //两个文字重叠，
                            startTextY = realBarHeight - itemHeight - 1.5*fontSize;
                            startPercentTextY = realBarHeight - itemHeight - fontSize/2;
                        }
                    }
                    if (itemHeight - itemPercentHeight < fontSize) { //短柱ok,长柱不足
                        startTextY = realBarHeight - itemHeight - 1.5*fontSize;
                    }
                }

                // let startTextY = realBarHeight - itemHeight * (1 + item.rightPercent) / 2;
                ctx.setTextBaseline('middle'); //垂直居中
                ctx.setTextAlign('center'); //水平居中
                ctx.setFontSize(fontSize);
                ctx.setFillStyle(highFontColor);
                ctx.fillText(item.personNum, startX + itemWidth / 2, startTextY, itemWidth);
                // #ifdef H5
                ctx.draw(true);
                // #endif

                //画百分比文字
                ctx.setTextBaseline('middle'); //垂直居中
                ctx.setTextAlign('center'); //水平居中
                ctx.setFontSize(fontSize);
                ctx.setFillStyle(curLowFontColor);
                // let startPercentTextY = realBarHeight - itemPercentHeight / 2;
                ctx.fillText(item.rightPercent * 100 + "%", startX + itemWidth / 2, startPercentTextY, itemWidth);
                // #ifdef H5
                ctx.draw(true);
                // #endif

                //画底部标题
                ctx.setTextBaseline('middle'); //垂直居中
                ctx.setTextAlign('center'); //水平居中
                ctx.setFontSize(titleSize);
                ctx.setFillStyle(titleColor);
                let titleY = barHeight - titleHeight / 2;
                ctx.fillText(item.name, startX + itemWidth / 2, titleY);
                console.log('draw')
                // #ifdef H5
                ctx.draw(true);
                // #endif
            }
            // #ifdef APP-PLUS
            ctx.draw()
            // #endif
        }

    },
}

export default barCanvas;